<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>密码列表</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body class="main_body white">

  <div class="layui-table-tool">
    <div class="layui-table-tool-temp">
      <div class="layui-btn-container"> 
        <button class="layui-btn layui-btn-sm" id="addPassword">添加密码</button>  
      </div>
    </div>
    <div class="layui-table-tool-self"></div>
  </div>


  <div class="layui-layout">
    <div style="padding: 16px;">
      <table id="passwordList" lay-filter="passwordList"></table>
    </div>
  </div>

  <script src="/static/layui/layui.js"></script>
  <script>
    layui.use(['table', 'layer'], function () {
      var table = layui.table;
      var layer = layui.layer;
      var $ = layui.$;
      // 渲染表格
      table.render({
        elem: '#passwordList',
        url: '/tools/Password/list',
        page: true,
        height: 'full-35', // 最大高度减去其他容器已占有的高度差
        lineStyle: 'height: 70px;',
        css: [ // 重设当前表格样式
          '.layui-table-tool-temp{padding-right: 145px;}'
        ].join(''),
        cellMinWidth: 80,
        cols: [[
          { field: 'name', title: '网站名称', width: 150 },
          { field: 'url', title: '网站地址' },
          { field: 'username', title: '用户名', width: 150 },
          {
            field: 'password', title: '密码', templet: function (d) {
              return '<a href="javascript:;" class="show-password" data-id="' + d.id + '">显示密码</a>';
            }, width: 120
          },
          { field: 'create_time', title: '创建时间' },
          { title: '操作', toolbar: '#passwordBar' }
        ]],
        done: function () {
          // 绑定显示密码事件
          $('.show-password').on('click', function () {
            var id = $(this).data('id');

            // 发送请求获取密码
            $.post('/tools/Password/getPassword', { id: id }, function (res) {
              if (res.code === 0) {
                layer.alert(res.data.password, {
                  title: '密码',
                  closeBtn: 1,
                  btn: ['复制', '关闭'],
                  yes: function (index) {
                    // 复制密码到剪贴板
                    var password = res.data.password; // 替换为实际的密码
                    var textarea = document.createElement('textarea');
                    textarea.value = password;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    layer.msg('密码已复制到剪贴板');
                    layer.close(index);

                  }
                })
              }
            })
          });
        }
      });

      // 监听工具条
      table.on('tool(passwordList)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
          layer.open({
            title: '编辑密码',
            type: 2,
            area: ['80%', '80%'],
            content: '/tools/Password/edit?id=' + data.id,
            end: function () {
              table.reload('passwordList');
            }
          });
        } else if (obj.event === 'del') {
          layer.confirm('确定要删除该记录吗？', function (index) {
            $.post('/tools/Password/del', { id: data.id }, function (res) {
              if (res.code === 0) {
                layer.msg('删除成功');
                obj.del();
              } else {
                layer.msg(res.msg);
              }
            });
            layer.close(index);
          });
        }
      });

      // 添加密码按钮点击事件
      $('#addPassword').on('click', function () {
        layer.open({
          title: '添加密码',
          type: 2,
          area: ['80%', '80%'],
          content: '/tools/Password/add',
          end: function () {
            table.reload('passwordList');
          }
        });
      });
    });
  </script>

  <!-- 表格操作列模板 -->
  <script type="text/html" id="passwordBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>

</html>